<template>
  <div>
    <Form>
      <Row :gutter="24">
        <Col span="12">
          <FormItem :label-width="200">
            <template #label>
              <span>申请书</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadFang">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(imgList, '10000')" v-if="imgList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem :label-width="200">
            <template #label>
              <span>家庭成员和赡抚养人的身份证</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadFamily">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(familyList, '10001')" v-if="familyList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem :label-width="200">
            <template #label>
              <span>家庭成员和赡抚养人的户口本</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadFamily2">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(family2List, '10002')" v-if="family2List.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem :label-width="200">
            <template #label>
              <span>委托核查家庭经济状况的授权书</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadJingji">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(jingjiList, '10003')" v-if="jingjiList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem :label-width="200">
            <template #label>
              <span>鞍山市社会救助对象诚信承诺书</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadChengnuo">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(chengnuoList, '10004')" v-if="chengnuoList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem :label-width="200">
            <template #label>
              <span>残疾证</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadCanji">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(canjiList, '10005')" v-if="canjiList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem :label-width="200">
            <template #label>
              <span>（重病患者）病历和相关检查材料</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadBingli">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(bingliList, '10006')" v-if="bingliList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem :label-width="200">
            <template #label>
              <span>（在职职工）工作单位劳资人事部门出具的收入证明、（下岗失业人员）劳动就业部门出具的收入证明或（申请城市低保其家庭成员中有农业户口的）村委会出具的农业收入证明</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadShouru">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(shouruList, '10038')" v-if="shouruList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem :label-width="200">
            <template #label>
              <span>（离退休人员）领取离退休金的相关凭证、（领取一次性经济补偿金或安置费等的）一次性补偿金或安置费证明或县级民政部门规定的其他材料</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadTuixiu">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(tuixiuList, '10008')" v-if="tuixiuList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem :label-width="200">
            <template #label>
              <span>（丧失或部分丧失劳动能力的）劳动能力鉴定结论、（就业年龄内尚在学校读书的）学校出具的在校证明</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadLoaodong">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(laodongList, '10040')" v-if="laodongList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem :label-width="200">
            <template #label>
              <span>（夫妻离异涉及抚养、扶养义务的）离婚判决书、调解书或离婚协议</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadLihun">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(lihunList, '10007')" v-if="lihunList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem :label-width="200">
            <template #label>
              <span>（有赡养、抚养、扶养义务的）赡养、抚养、扶养协议</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadShanyang">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(shanyangList, '10039')" v-if="shanyangList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Modal v-model="preShow" :closable="false" :styles="{top: '20px'}" width="532">
      <Carousel v-model="picIndex" style="width:500px" dots="outside" trigger="hover">
        <CarouselItem class="centerimg" v-for="(imginfo, index) in pic_urls" :key="index">
          <img :id="printNum(index)" :src="imginfo" class="pre_img_style"/>
        </CarouselItem>
      </Carousel>
      <div slot="footer" style="text-align: center">
        <div>
          <Button type="error" v-if="paramsData.operation !== '2'" @click="deletePic">删除当前照片</Button>
          <Button @click="preShow=false">关闭</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import { createUpLoadFiles, getSign } from '@/api/common'
export default {
  props: {
    paramsData: Object
  },
  data () {
    return {
      preShow: false,
      pic_urls: [],
      upPicData: {
        fileName: '',
        filePath: '/aszwyz/bangfu/'
      },
      imgString: '',
      imgList: [], // 申请书list
      familyList: [], // 家庭成员和赡抚养人的身份证
      family2List: [], // 家庭成员和赡抚养人的户口本
      jingjiList: [], // 委托核查家庭经济状况的授权书
      chengnuoList: [], // 鞍山市社会救助对象诚信承诺书
      canjiList: [], // 残疾证
      bingliList: [], // （重病患者）病历和相关检查材料
      shouruList: [], // （在职职工）工作单位劳资人事部门出具的收入证明
      tuixiuList: [], // （离退休人员）领取离退休金的相关凭证
      laodongList: [], // （丧失或部分丧失劳动能力的）劳动能力鉴定结论、（就业年龄内尚在学校读书的）学校出具的在校证明
      lihunList: [], // （夫妻离异涉及抚养、扶养义务的）离婚判决书、调解书或离婚协议
      shanyangList: [], // （有赡养、抚养、扶养义务的）赡养、抚养、扶养协议
      picIndex: 0,
      params: {}
    }
  },
  methods: {
    uploadFang (file) { // 上传申请书
      this.createUpload(file, this.imgList, '10000')
    },
    uploadFamily (file) {
      this.createUpload(file, this.familyList, '10001')
    },
    uploadFamily2 (file) {
      this.createUpload(file, this.family2List, '10002')
    },
    uploadJingji (file) {
      this.createUpload(file, this.jingjiList, '10003')
    },
    uploadChengnuo (file) {
      this.createUpload(file, this.chengnuoList, '10004')
    },
    uploadCanji (file) {
      this.createUpload(file, this.canjiList, '10005')
    },
    uploadBingli (file) {
      this.createUpload(file, this.bingliList, '10006')
    },
    uploadShouru (file) {
      this.createUpload(file, this.shouruList, '10038')
    },
    uploadTuixiu (file) {
      this.createUpload(file, this.tuixiuList, '10008')
    },
    uploadLoaodong (file) {
      this.createUpload(file, this.laodongList, '10040')
    },
    uploadLihun (file) {
      this.createUpload(file, this.lihunList, '10007')
    },
    uploadShanyang (file) {
      this.createUpload(file, this.shanyangList, '10039')
    },
    createUpload (file, list, imgString) {
      if (file.size / 1024 / 1024 > 1) { // 图片大于1M进行压缩处理
        return new Promise(() => {
          imageConversion.compressAccurately(file, 200).then(res => {
            let fileName = file.name
            fileName = fileName.replace(',', '')
            this.upPicData.fileName = fileName + '.' + file.type.substring(6)
            let that = this
            const reader = new FileReader()
            reader.readAsDataURL(new File([res], '', { type: res.type, lastModified: Date.now() }))
            reader.onload = () => {
              let index = reader.result.indexOf('base64,') + 7
              that.upPicData.file = reader.result.substring(index)
              that.upPic(that.upPicData, list, imgString)
            }
            return false
          })
        })
      } else {
        this.upPicData.fileName = file.name + '.' + file.type.substring(6)
        let that = this
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          let index = reader.result.indexOf('base64,') + 7
          that.upPicData.file = reader.result.substring(index)
          that.upPic(that.upPicData, list, imgString)
        }
        return false
      }
    },
    upPic (obj, list, imgsString) {
      var time = new Date().getTime()
      this.timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: this.timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          createUpLoadFiles(res.data.data.docking_url, { sign: res.data.data.sign, timestamp: this.timeStep, filePath: obj.filePath, fileName: obj.fileName, file: obj.file }).then(res => {
            if (res.data.errcode === 0) {
              let imgurl = res.data.data
              list.push(imgurl)
              console.log(list, 'this.list')
              let imgString = ''
              list.forEach(function (item) {
                if (imgString) {
                  imgString = imgString + ',' + item
                } else {
                  imgString = item
                }
              })
              this.$set(this.params, imgsString, imgString)
              console.log(this.params)
            } else {
              this.$Notice.error({ title: '上传失败', desc: '' })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: '' })
        }
      })
    },
    preview (list, imgString) {
      this.preShow = true
      this.pic_urls = list
      this.imgString = imgString
      console.log(this.pic_urls, 'img=============')
    },
    deletePic () {
      this.pic_urls.splice(this.picIndex, 1)
      if (this.imgString === '10000') {
        this.imgList = this.pic_urls
      } else if (this.imgString === '10001') {
        this.familyList = this.pic_urls
      } else if (this.imgString === '10002') {
        this.family2List = this.pic_urls
      } else if (this.imgString === '10003') {
        this.jingjiList = this.pic_urls
      } else if (this.imgString === '10004') {
        this.chengnuoList = this.pic_urls
      } else if (this.imgString === '10005') {
        this.canjiList = this.pic_urls
      } else if (this.imgString === '10006') {
        this.bingliList = this.pic_urls
      } else if (this.imgString === '10038') {
        this.shouruList = this.pic_urls
      } else if (this.imgString === '10008') {
        this.tuixiuList = this.pic_urls
      } else if (this.imgString === '10040') {
        this.laodongList = this.pic_urls
      } else if (this.imgString === '10007') {
        this.lihunList = this.pic_urls
      } else if (this.imgString === '10039') {
        this.shanyangList = this.pic_urls
      }
      if (this.pic_urls.length === 0) {
        this.preShow = false
      }
      let imgString = ''
      this.pic_urls.forEach(function (item) {
        if (imgString) {
          imgString = imgString + ',' + item
        } else {
          imgString = item
        }
      })
      this.$set(this.params, this.imgString, imgString)
    },
    printNum (e) {
      this.printIndex = e
      return e
    },
    updateParams () {
      if (this.paramsData.code) {
        let param = this.paramsData.paramData.param
        console.log(param)
        this.params = param
        if (param['10000']) {
          this.imgList = param['10000'].split(',')
        }
        if (param['10001']) {
          this.familyList = param['10001'].split(',')
        }
        if (param['10002']) {
          this.family2List = param['10002'].split(',')
        }
        if (param['10003']) {
          this.jingjiList = param['10003'].split(',')
        }
        if (param['10004']) {
          this.chengnuoList = param['10004'].split(',')
        }
        if (param['10005']) {
          this.canjiList = param['10005'].split(',')
        }
        if (param['10006']) {
          this.bingliList = param['10006'].split(',')
        }
        if (param['10038']) {
          this.shouruList = param['10038'].split(',')
        }
        if (param['10008']) {
          this.tuixiuList = param['10008'].split(',')
        }
        if (param['10040']) {
          this.laodongList = param['10040'].split(',')
        }
        if (param['10007']) {
          this.lihunList = param['10007'].split(',')
        }
        if (param['10039']) {
          this.shanyangList = param['10039'].split(',')
        }
      }
    }
  },
  mounted () {
  },
  watch: {
    paramsData: {
      deep: true,
      handler: function (newVal, oldVal) {
        this.$nextTick(() => {
          this.paramsData = newVal
          this.updateParams()
        })
      }
    }
  }
}
</script>
